<template>
  <div class="content">
    <div class="tab">
      <div
        class="tab-item"
        :class="{active: currentTab === item}"
        v-for="(item, index) in tabData"
        @click="changeTab(item)"
      >{{ item }}</div>
    </div>
    <div class="main-content">
      <div v-show="currentTab === '基本收费规则'">
        <el-form
          :model="parkBaseInfo"
          :rules="parkBaseInfoRules"
          ref="parkBaseInfo"
          label-width="120px"
          size="small"
          class="zb-form rule-form"
        >
          <el-form-item
            label="收费规则图片"
            prop="chargeRulePicStr"
            class="zb-upload-img"
          >
            <el-input
              v-model="parkBaseInfo.chargeRulePicStr"
              v-show="false"
            ></el-input>
            <el-upload
              class="upload-demo"
              style="width:400px"
              action=""
              :on-change="handleChange"
              :before-upload="beforeAvatarUpload"
              :file-list="parkBaseInfo.uiOpt.chargeRuleImgList"
              list-type="picture"
            >
              <el-button
                size="small"
                type="primary"
              >选取图片</el-button>
              <div
                slot="tip"
                class="el-upload__tip"
              >只能上传jpg/png文件，且不超过900kb <a
                  href="javascript:;"
                  class="demo-icon"
                  @click="downloadRuleTemplate"
                >查看图例</a></div>
            </el-upload>
          </el-form-item>

          <div class="el-form--inline zb-inline-form rule-inline-form">
            <el-form-item
              label="缴费后离场时限"
              label-width="125px"
              class="input-width-control"
              prop="timeoutLength"
              :rules="[{required: true,validator: checkUnit,trigger: 'blur'}]"
            >
              <el-input
                type="number"
                v-model="parkBaseInfo.timeoutLength"
              ></el-input>
            </el-form-item>
            <span class="unit">分钟</span>
            <el-tooltip
              effect="dark"
              content="缴费后的离场时间，超时重新计费"
              placement="top"
            >
              <i class="el-icon-question question-icon"></i>
            </el-tooltip>
          </div>

          <el-form-item label="计费组类别">
            <a
              href="javascript:;"
              class="add-ruleGroup-icon"
              @click="addRuleGroup"
            >
              <i class="el-icon-circle-plus"></i>
              添加计费组
            </a>
          </el-form-item>

        </el-form>

        <el-form
          :model="pageChargeList"
          ref="pageChargeList"
          label-width="120px"
          size="small"
          class="zb-form rule-form"
          v-for="(parkChargeBaseVoListItem, parkChargeBaseVoListItemIndex) in pageChargeList.parkChargeBaseVoList"
          :key="parkChargeBaseVoListItemIndex"
        >
          <div class="charge-rule">
            <div class="rule-top">
              <div class="title">计费组{{ parkChargeBaseVoListItemIndex + 1 }}</div>
              <div class="action">
                <div
                  class="open-status"
                  v-if="parkChargeBaseVoListItem.isDefault"
                >
                  默认
                </div>

                <div
                  class="show-rule-detail-icon"
                  @click="parkChargeBaseVoListItem.uiOpt.isShow = !parkChargeBaseVoListItem.uiOpt.isShow"
                >
                  <i
                    class="el-icon-caret-right"
                    :class="{rotate90:
                      parkChargeBaseVoListItem.uiOpt.isShow}"
                  ></i>
                </div>
                <div
                  class="delItem-icon"
                  @click="delRuleGroup(pageChargeList.parkChargeBaseVoList, parkChargeBaseVoListItemIndex, parkChargeBaseVoListItem)"
                >
                  <i class="el-icon-close"></i>
                </div>
              </div>

            </div>
            <el-collapse-transition>
              <div
                class="charge-content"
                v-show="parkChargeBaseVoListItem.uiOpt.isShow "
              >
                <div class="el-form--inline zb-inline-form rule-inline-form">
                  <el-form-item
                    label="计费组名称"
                    label-width="107px"
                    class="input-width-control"
                    :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.typeName'"
                    :rules="{
                      required: true, message: '计费组名称不能为空', trigger: 'blur'
                    }"
                  >
                    <el-input v-model.trim="parkChargeBaseVoListItem.typeName"></el-input>
                  </el-form-item>
                  <el-form-item
                    label=""
                    label-width="0"
                    style="margin-left: 15px"
                  >
                    <el-checkbox
                      v-model="parkChargeBaseVoListItem.isDefault"
                      :disabled="parkChargeBaseVoListItem.isDefault"
                      @change="setDefaultRuleGroup($event, parkChargeBaseVoListItemIndex)"
                    >设为默认</el-checkbox>
                  </el-form-item>
                </div>

                <el-form-item label="配置收费规则">
                  <el-radio-group
                    v-model="parkChargeBaseVoListItem.isFree"
                    class="radio-rule-type"
                    @change="changeChargeRuleType($event, parkChargeBaseVoListItem, parkChargeBaseVoListItem.uiOpt.carTypeOpt)"
                  >
                    <el-radio label="免费车场"></el-radio>
                    <el-radio label="收费车场"></el-radio>
                  </el-radio-group>

                  <el-button
                    type="primary"
                    size="small"
                    class="add-rule-icon"
                    @click="addRuleItem(parkChargeBaseVoListItem.parkChargeStandardVoList, parkChargeBaseVoListItem.uiOpt.carTypeOpt)"
                    v-if="parkChargeBaseVoListItem.isFree === '收费车场'"
                  ><i class="el-icon-plus"></i>收费规则</el-button>
                </el-form-item>

                <div v-if="parkChargeBaseVoListItem.isFree === '收费车场'">

                  <div
                    class="rule-items"
                    v-for="(parkChargeStandardVoListItem, parkChargeStandardVoListIndex) in parkChargeBaseVoListItem.parkChargeStandardVoList"
                    :key="parkChargeStandardVoListIndex"
                  >

                    <div class="rule-item">
                      <div
                        class="del-rule-item-icon"
                        v-if="parkChargeStandardVoListIndex !== 0"
                        @click="delRules(parkChargeBaseVoListItem.parkChargeStandardVoList, parkChargeStandardVoListIndex, parkChargeBaseVoListItem.uiOpt.carTypeOpt)"
                      >
                        <i class="el-icon-circle-close"></i>
                      </div>
                      <div class="el-form--inline zb-inline-form rule-inline-form">
                        <el-form-item
                          label="规则名称"
                          label-width="84px"
                          class="input-width-control"
                          :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.standardName'"
                          :rules="{
                      required: true, message: '规则名称不能为空', trigger: 'blur'
                    }"
                        >
                          <el-input v-model="parkChargeStandardVoListItem.standardName"></el-input>
                        </el-form-item>
                        <el-form-item
                          label="适用车型"
                          label-width="84px"
                          class="input-width-control"
                          :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.carType'"
                          :rules="{
                      required: true, message: '请选择适用车型', trigger: 'change'
                    }"
                        >
                          <el-select
                            v-model="parkChargeStandardVoListItem.carType"
                            placeholder="请选择"
                            @change="setChargeRuleCarTypeDisabled(parkChargeBaseVoListItem.parkChargeStandardVoList, parkChargeBaseVoListItem.uiOpt.carTypeOpt)"
                          >
                            <el-option
                              v-for="item in parkChargeBaseVoListItem.uiOpt.carTypeOpt"
                              :key="item.value"
                              :label="item.name"
                              :value="item.value"
                              :disabled="item.disabled"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </div>
                      <div
                        class="rule-detail"
                        v-if="parkChargeStandardVoListItem.uiOpt"
                      >
                        <div class="show-rule-detail">
                          <div class="title">规则详情</div>
                          <div
                            class="show-rule-detail-icon"
                            @click="parkChargeStandardVoListItem.uiOpt.isShowRuleDetail = !parkChargeStandardVoListItem.uiOpt.isShowRuleDetail"
                          >
                            <i
                              class="el-icon-caret-right"
                              :class="{rotate90:
                      parkChargeStandardVoListItem.uiOpt.isShowRuleDetail}"
                            ></i>
                          </div>
                        </div>
                        <el-collapse-transition>
                          <div
                            class="detail-content"
                            v-show="parkChargeStandardVoListItem.uiOpt.isShowRuleDetail"
                          >
                            <div class="el-form--inline zb-inline-form rule-inline-form">
                              <el-form-item
                                label="免费时长"
                                label-width="104px"
                                class="input-width-control"
                                :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.freeTime'"
                                :rules="{
                            required: true, message: '免费时长不能为空', trigger: 'blur'
                          }"
                              >
                                <el-input
                                  type="number"
                                  v-model.number="parkChargeStandardVoListItem.freeTime"
                                  min="0"
                                ></el-input>
                              </el-form-item>
                              <span class="unit">分钟</span>
                              <el-form-item
                                label=""
                                label-width="0"
                                style="margin-left: 15px"
                              >
                                <el-checkbox v-model="parkChargeStandardVoListItem.freeTimeAcc">列入计费</el-checkbox>
                              </el-form-item>
                            </div>

                            <div class="el-form--inline zb-inline-form rule-inline-form">
                              <el-form-item
                                label="区分时段"
                                label-width="104px"
                                class="input-width-control"
                              >
                                <el-radio-group
                                  v-model="parkChargeStandardVoListItem.uiOpt.curSplitTime"
                                  @change="setChargeRuleIsTimes($event, parkChargeStandardVoListItem)"
                                  class="rule-times-radio"
                                >
                                  <el-radio
                                    :label="item"
                                    v-for="(item, index) in parkChargeStandardVoListItem.uiOpt.splitTimeOpt"
                                  >{{item}}</el-radio>
                                </el-radio-group>

                              </el-form-item>

                              <template v-if="parkChargeStandardVoListItem.uiOpt.curSplitTime === '分时段'">
                                <el-form-item
                                  label="分"
                                  label-width="26px"
                                  class="input-width-control"
                                >
                                  <el-input-number
                                    :min="2"
                                    :max="100"
                                    label="时段数"
                                    v-model="parkChargeStandardVoListItem.uiOpt.splitTimeCount"
                                    @change="splitTimeChange($event, parkChargeStandardVoListItem.parkChargeStandardPeriodVoList)"
                                  ></el-input-number>
                                </el-form-item>
                                <span class="unit">段</span>
                              </template>
                              <el-tooltip
                                effect="dark"
                                placement="top"
                              >
                                <div slot="content">
                                  不分时段：整个停车时段默认同一种计算方式 <br />
                                  分时段：根据停车时段的不同，用的计算方法不同，如日夜区分型车场<br />
                                </div>
                                >
                                <i
                                  class="el-icon-question question-icon"
                                  style="transform: tranlateY(2px)"
                                ></i>
                              </el-tooltip>

                            </div>

                            <div
                              class="rule-setting"
                              v-for="(TimeRuleItem, index) in parkChargeStandardVoListItem.parkChargeStandardPeriodVoList"
                              v-if="parkChargeStandardVoListItem.uiOpt.curSplitTime === '不分时段'"
                            >

                              <el-form-item
                                label=""
                                label-width="0px"
                                class="input-width-control"
                                style="margin-bottom: 0"
                              >
                                <el-radio-group
                                  v-model="TimeRuleItem.uiOpt.curRuleType"
                                  @change="timeRuleChange($event, TimeRuleItem)"
                                >
                                  <div class="rule-type-tab">
                                    <el-tooltip
                                      effect="dark"
                                      :content="`${item === '按次定额收费' ? '适用于按停车次数收费的停车场' : ''}${item === '按单价收费' ? '适用于按单位时间收费的停车场，如6元/小时' : ''}${item === '递增收费' ? '适用于前段时间收取固定额，后段按定额或单位时间收取费用的场景' : ''}`"
                                      placement="top"
                                      v-for="(item, index) in TimeRuleItem.uiOpt.ruleTypeOpt"
                                    >
                                      <div
                                        class="tab-item"
                                        :class="{active: item === TimeRuleItem.uiOpt.curRuleType}"
                                      >
                                        <el-radio :label="item">{{item}}</el-radio>
                                      </div>
                                    </el-tooltip>

                                  </div>
                                </el-radio-group>
                              </el-form-item>
                              <div class="rule-setting-content">
                                <div
                                  class="dingE-content type-content"
                                  v-if="TimeRuleItem.uiOpt.curRuleType === '按次定额收费'"
                                >
                                  <template v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList">
                                    <div class="el-form--inline zb-inline-form rule-inline-form">
                                      <el-form-item
                                        label=""
                                        label-width="0"
                                        class="input-width-control short-input-item"
                                        :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeAmount'"
                                        :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                                      >
                                        <el-input
                                          placeholder="￥"
                                          type="number"
                                          v-model.number="ruleItemDetailItem.chargeAmount"
                                        ></el-input>
                                      </el-form-item>
                                      <span class="unit">元/次</span>
                                    </div>
                                  </template>
                                </div>

                                <div
                                  class="price-content type-content"
                                  v-if="TimeRuleItem.uiOpt.curRuleType === '按单价收费'"
                                >
                                  <template v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList">
                                    <div class="el-form--inline zb-inline-form rule-inline-form">
                                      <el-form-item
                                        label="每"
                                        label-width="40px"
                                        class="input-width-control short-input-item"
                                        :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeUnit'"
                                        :rules="[{required: true,validator: checkUnit,trigger: 'blur'}]"
                                      >
                                        <el-input
                                          type="number"
                                          placeholder="分钟数"
                                          v-model.number="ruleItemDetailItem.chargeUnit"
                                        ></el-input>
                                      </el-form-item>

                                      <el-form-item
                                        label=""
                                        label-width=""
                                        class="input-width-control short-input-item"
                                      >
                                        <el-select
                                          v-model="ruleItemDetailItem.uiOpt.curTimeType"
                                          placeholder="请选择"
                                          v-if="ruleItemDetailItem.uiOpt"
                                        >
                                          <el-option
                                            v-for="item in opts.timeType"
                                            :key="item.type"
                                            :label="item.type"
                                            :value="item.type"
                                            :disabled="item.type === '小时'"
                                          >
                                          </el-option>
                                        </el-select>
                                      </el-form-item>

                                      <el-form-item
                                        label=""
                                        label-width="0"
                                        class="input-width-control short-input-item"
                                        :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeAmount'"
                                        :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                                      >
                                        <el-input
                                          type="number"
                                          placeholder="￥"
                                          v-model.number="ruleItemDetailItem.chargeAmount"
                                        ></el-input>
                                      </el-form-item>

                                      <span class="unit">元</span>

                                      <el-form-item
                                        label="结算方式"
                                        label-width="90px"
                                        class="input-width-control short-input-item"
                                      >
                                        <el-select
                                          v-model="TimeRuleItem.mxSettleType"
                                          placeholder="请选择"
                                        >
                                          <el-option
                                            v-for="item in opts.optionMxSettleType"
                                            :key="item.value"
                                            :label="item.name"
                                            :value="item.value"
                                          >
                                          </el-option>
                                        </el-select>
                                      </el-form-item>
                                      <el-tooltip
                                        effect="dark"
                                        placement="top"
                                      >
                                        <div slot="content">
                                          自然计算：超过时间区间后顺延至计费单位结束才进入下一个时间区间进行计费； <br />
                                          强制结算：超过时间区间点后，不考虑计费单位，直接转入下一个时间区间进行计费<br />
                                          如：<br />
                                          12点前5元/小时，12点后6元/小时，车11:30进场<br />
                                          自然结算：11:30-12:30 5元，12:30后才按6元/小时收费，如果12:15出场，则需交费5元；<br />
                                          强制结算：11:30-12:00 5元，12:00后按照6元/小时收费，如果12:15出场，则需交费5元+6元=11元
                                        </div>

                                        <i class="el-icon-question question-icon"></i>
                                      </el-tooltip>
                                    </div>
                                  </template>
                                </div>

                                <div
                                  class="xunhuan-content type-content"
                                  v-if="TimeRuleItem.uiOpt.curRuleType === '递增收费'"
                                >
                                  <div class="top-circle"></div>
                                  <div class="bottom-circle"></div>
                                  <template v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList">
                                    <div
                                      class="el-form--inline zb-inline-form rule-inline-form"
                                      v-if="dindex === 0 && ruleItemDetailItem.chargeType === 2 && ruleItemDetailItem.stepType === 1"
                                    >
                                      <el-form-item
                                        label="首"
                                        label-width="79px"
                                        class="input-width-control short-input-item"
                                        :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeUnit'"
                                        :rules="[{required: true,validator: checkUnit,trigger: 'blur'}]"
                                      >
                                        <el-input
                                          type="number"
                                          placeholder="分钟数"
                                          v-model.number="ruleItemDetailItem.chargeUnit"
                                        ></el-input>
                                        <!-- <el-input placeholder="小时数"></el-input> -->
                                      </el-form-item>

                                      <el-form-item
                                        label=""
                                        label-width=""
                                        class="input-width-control short-input-item"
                                      >
                                        <el-select
                                          v-model="ruleItemDetailItem.uiOpt.curTimeType"
                                          placeholder="请选择"
                                          v-if="ruleItemDetailItem.uiOpt"
                                        >
                                          <el-option
                                            v-for="item in opts.timeType"
                                            :key="item.type"
                                            :label="item.type"
                                            :value="item.type"
                                            :disabled="item.type === '小时'"
                                          >
                                          </el-option>
                                        </el-select>
                                      </el-form-item>

                                      <el-form-item
                                        label=""
                                        label-width="0"
                                        class="input-width-control short-input-item"
                                        :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeAmount'"
                                        :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                                      >
                                        <el-input
                                          type="number"
                                          placeholder="￥"
                                          v-model.number="ruleItemDetailItem.chargeAmount"
                                        ></el-input>
                                      </el-form-item>

                                      <span class="unit">元</span>

                                      <el-button
                                        type="primary"
                                        size="mini"
                                        class="add-ruleDetial-icon"
                                        style="margin-left: 8px"
                                        @click="addDingE_RuleItem(TimeRuleItem.parkChargeStandardPeriodDetailVoList)"
                                      ><i class="el-icon-plus"></i>定额</el-button>
                                      <el-button
                                        type="primary"
                                        size="mini"
                                        class="add-ruleDetial-icon"
                                        @click="addXunHuan_RuleItem(TimeRuleItem, TimeRuleItem.parkChargeStandardPeriodDetailVoList)"
                                        :disabled="TimeRuleItem.isHasXunhuan"
                                      ><i class="el-icon-plus"></i>循环</el-button>
                                    </div>

                                    <div
                                      class="el-form--inline zb-inline-form rule-inline-form xunhuan-inline-form"
                                      v-if="dindex !== 0 && ruleItemDetailItem.chargeType === 2 && ruleItemDetailItem.stepType === 1"
                                    >
                                      <el-form-item
                                        label="定额"
                                        label-width="79px"
                                        class="input-width-control short-input-item"
                                        :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeUnit'"
                                        :rules="[{required: true,validator: checkUnit,trigger: 'blur'}]"
                                      >
                                        <el-input
                                          type="number"
                                          placeholder="分钟数"
                                          v-model.number="ruleItemDetailItem.chargeUnit"
                                        ></el-input>
                                      </el-form-item>

                                      <el-form-item
                                        label=""
                                        label-width=""
                                        class="input-width-control short-input-item"
                                      >
                                        <el-select
                                          v-model="ruleItemDetailItem.uiOpt.curTimeType"
                                          placeholder="请选择"
                                          v-if="ruleItemDetailItem.uiOpt"
                                        >
                                          <el-option
                                            v-for="item in opts.timeType"
                                            :key="item.type"
                                            :label="item.type"
                                            :value="item.type"
                                            :disabled="item.type === '小时'"
                                          >
                                          </el-option>
                                        </el-select>

                                      </el-form-item>

                                      <el-form-item
                                        label=""
                                        label-width="0"
                                        class="input-width-control short-input-item"
                                        :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeAmount'"
                                        :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                                      >
                                        <el-input
                                          type="number"
                                          placeholder="￥"
                                          v-model.number="ruleItemDetailItem.chargeAmount"
                                        ></el-input>
                                      </el-form-item>

                                      <span class="unit">元</span>

                                      <div
                                        class="del-icon"
                                        @click="delRuleItemDetailItem(TimeRuleItem.parkChargeStandardPeriodDetailVoList, dindex)"
                                      >
                                        <i class="el-icon-close"></i>
                                      </div>
                                    </div>
                                  </template>
                                  <template v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList">

                                    <div
                                      class="el-form--inline zb-inline-form rule-inline-form xunhuan-inline-form"
                                      v-if=" ruleItemDetailItem.chargeType === 2 && ruleItemDetailItem.stepType === 2"
                                    >
                                      <el-form-item
                                        label="之后每"
                                        label-width="78px"
                                        class="input-width-control short-input-item"
                                        :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeUnit'"
                                        :rules="[{required: true,validator: checkUnit,trigger: 'blur'}]"
                                      >
                                        <el-input
                                          type="number"
                                          placeholder="分钟数"
                                          v-model.number="ruleItemDetailItem.chargeUnit"
                                        ></el-input>
                                        <!-- <el-input placeholder="小时数"></el-input> -->
                                      </el-form-item>

                                      <el-form-item
                                        label=""
                                        label-width=""
                                        class="input-width-control short-input-item"
                                      >
                                        <el-select
                                          v-model="ruleItemDetailItem.uiOpt.curTimeType"
                                          placeholder="请选择"
                                          v-if="ruleItemDetailItem.uiOpt"
                                        >
                                          <el-option
                                            v-for="item in opts.timeType"
                                            :key="item.type"
                                            :label="item.type"
                                            :value="item.type"
                                            :disabled="item.type === '小时'"
                                          >
                                          </el-option>
                                        </el-select>

                                      </el-form-item>

                                      <el-form-item
                                        label=""
                                        label-width="0"
                                        class="input-width-control short-input-item"
                                        :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeAmount'"
                                        :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                                      >
                                        <el-input
                                          type="number"
                                          placeholder="￥"
                                          v-model.number="ruleItemDetailItem.chargeAmount"
                                        ></el-input>
                                      </el-form-item>

                                      <span class="unit">元</span>

                                      <div
                                        class="del-icon"
                                        @click="delRuleItemDetailXunHuanItem(TimeRuleItem, TimeRuleItem.parkChargeStandardPeriodDetailVoList, dindex)"
                                      >
                                        <i class="el-icon-close"></i>
                                      </div>
                                    </div>

                                  </template>

                                  <div class="el-form--inline zb-inline-form rule-inline-form">
                                    <el-form-item
                                      label="结算方式"
                                      label-width="78px"
                                      class="input-width-control short-input-item"
                                    >
                                      <el-select
                                        v-model="TimeRuleItem.mxSettleType"
                                        placeholder="请选择"
                                      >
                                        <el-option
                                          v-for="item in opts.optionMxSettleType"
                                          :key="item.value"
                                          :label="item.name"
                                          :value="item.value"
                                        >
                                        </el-option>
                                      </el-select>
                                    </el-form-item>
                                    <el-tooltip
                                      effect="dark"
                                      placement="top"
                                    >
                                      <div slot="content">
                                        自然计算：超过时间区间后顺延至计费单位结束才进入下一个时间区间进行计费； <br />
                                        强制结算：超过时间区间点后，不考虑计费单位，直接转入下一个时间区间进行计费<br />
                                        如：<br />
                                        12点前5元/小时，12点后6元/小时，车11:30进场<br />
                                        自然结算：11:30-12:30 5元，12:30后才按6元/小时收费，如果12:15出场，则需交费5元；<br />
                                        强制结算：11:30-12:00 5元，12:00后按照6元/小时收费，如果12:15出场，则需交费5元+6元=11元
                                      </div>

                                      <i class="el-icon-question question-icon"></i>
                                    </el-tooltip>
                                  </div>

                                </div>

                              </div>
                            </div>

                            <!-- //区分时段 -->
                            <div
                              class="rule-setting dates-rules"
                              v-for="(TimeRuleItem, index) in parkChargeStandardVoListItem.parkChargeStandardPeriodVoList"
                              v-if="parkChargeStandardVoListItem.uiOpt.curSplitTime === '分时段'"
                            >

                              <div class="el-form--inline zb-inline-form rule-inline-form date-form-item">
                                <el-form-item
                                  :label="`时段${index + 1}`"
                                  label-width="60px"
                                >
                                  <el-time-picker
                                    value-format="HH:mm:ss"
                                    format="HH:mm:ss"
                                    :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }"
                                    placeholder="开始时间"
                                    v-model="TimeRuleItem.timeArray[0]"
                                  >
                                  </el-time-picker>
                                </el-form-item>
                                <span
                                  class="unit"
                                  style="margin-right: 10px"
                                >至</span>
                                <el-form-item
                                  label=""
                                  label-width="0"
                                >
                                  <el-time-picker
                                    value-format="HH:mm:ss"
                                    format="HH:mm:ss"
                                    :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }"
                                    placeholder="结束时间"
                                    v-model="TimeRuleItem.timeArray[1]"
                                  >
                                  </el-time-picker>
                                </el-form-item>

                                <template v-if="TimeRuleItem.uiOpt.curRuleType !== '按次定额收费'">
                                  <el-form-item
                                    label=""
                                    label-width="0"
                                    class="input-width-control"
                                  >
                                    <el-checkbox
                                      style="margin-right: 15px"
                                      v-model="TimeRuleItem.isMaxCharge"
                                      @change="timeRuleMaxChargeChange($event, TimeRuleItem)"
                                    >封顶</el-checkbox>
                                  </el-form-item>

                                  <template v-if="TimeRuleItem.isMaxCharge">
                                    <el-form-item
                                      label=""
                                      label-width="0"
                                      class="input-width-control short-input-item"
                                      :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                                    >
                                      <el-input
                                        type="number"
                                        placeholder="￥"
                                        v-model="TimeRuleItem.maxCharge"
                                      ></el-input>
                                    </el-form-item>
                                    <span class="unit">元</span>
                                  </template>
                                </template>

                                <div
                                  class="del-icon"
                                  @click="delParkChargeStandardPeriodVoListItem(parkChargeStandardVoListItem,  parkChargeStandardVoListItem.parkChargeStandardPeriodVoList, index)"
                                  v-if="index > 1"
                                >
                                  <i class="el-icon-close"></i>
                                </div>
                              </div>

                              <el-form-item
                                label=""
                                label-width="0px"
                                class="input-width-control"
                                style="margin-bottom: 0"
                              >
                                <el-radio-group
                                  v-model="TimeRuleItem.uiOpt.curRuleType"
                                  @change="timeRuleChange($event, TimeRuleItem)"
                                >
                                  <div class="rule-type-tab">
                                    <el-tooltip
                                      effect="dark"
                                      :content="`${item === '按次定额收费' ? '适用于按停车次数收费的停车场' : ''}${item === '按单价收费' ? '适用于按单位时间收费的停车场，如6元/小时' : ''}${item === '递增收费' ? '适用于前段时间收取固定额，后段按定额或单位时间收取费用的场景' : ''}`"
                                      placement="top"
                                      v-for="(item, index) in TimeRuleItem.uiOpt.ruleTypeOpt"
                                    >
                                      <div
                                        class="tab-item"
                                        :class="{active: item === TimeRuleItem.uiOpt.curRuleType}"
                                      >
                                        <el-radio :label="item">{{item}}</el-radio>
                                      </div>
                                    </el-tooltip>
                                  </div>
                                </el-radio-group>
                              </el-form-item>
                              <div class="rule-setting-content">
                                <div
                                  class="dingE-content type-content"
                                  v-if="TimeRuleItem.uiOpt.curRuleType === '按次定额收费'"
                                >

                                  <template v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList">
                                    <div class="el-form--inline zb-inline-form rule-inline-form">
                                      <el-form-item
                                        label=""
                                        label-width="0"
                                        class="input-width-control short-input-item"
                                        :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeAmount'"
                                        :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                                      >
                                        <el-input
                                          placeholder="￥"
                                          type="number"
                                          v-model.number="ruleItemDetailItem.chargeAmount"
                                        ></el-input>
                                      </el-form-item>
                                      <span class="unit">元/次</span>
                                    </div>
                                  </template>

                                </div>

                                <div
                                  class="price-content type-content"
                                  v-if="TimeRuleItem.uiOpt.curRuleType === '按单价收费'"
                                >
                                  <template v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList">
                                    <div class="el-form--inline zb-inline-form rule-inline-form">
                                      <el-form-item
                                        label="每"
                                        label-width="40px"
                                        class="input-width-control short-input-item"
                                        :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeUnit'"
                                        :rules="[{required: true,validator: checkUnit,trigger: 'blur'}]"
                                      >
                                        <el-input
                                          type="number"
                                          placeholder="分钟数"
                                          v-model.number="ruleItemDetailItem.chargeUnit"
                                        ></el-input>
                                      </el-form-item>

                                      <el-form-item
                                        label=""
                                        label-width=""
                                        class="input-width-control short-input-item"
                                      >
                                        <el-select
                                          v-model="ruleItemDetailItem.uiOpt.curTimeType"
                                          placeholder="请选择"
                                          v-if="ruleItemDetailItem.uiOpt"
                                        >
                                          <el-option
                                            v-for="item in opts.timeType"
                                            :key="item.type"
                                            :label="item.type"
                                            :value="item.type"
                                            :disabled="item.type === '小时'"
                                          >
                                          </el-option>
                                        </el-select>
                                      </el-form-item>

                                      <el-form-item
                                        label=""
                                        label-width="0"
                                        class="input-width-control short-input-item"
                                        :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeAmount'"
                                        :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                                      >
                                        <el-input
                                          type="number"
                                          placeholder="￥"
                                          v-model.number="ruleItemDetailItem.chargeAmount"
                                        ></el-input>
                                      </el-form-item>

                                      <span class="unit">元</span>

                                      <el-form-item
                                        label="结算方式"
                                        label-width="90px"
                                        class="input-width-control short-input-item"
                                      >
                                        <el-select
                                          v-model="TimeRuleItem.mxSettleType"
                                          placeholder="请选择"
                                        >
                                          <el-option
                                            v-for="item in opts.optionMxSettleType"
                                            :key="item.value"
                                            :label="item.name"
                                            :value="item.value"
                                          >
                                          </el-option>
                                        </el-select>
                                      </el-form-item>

                                      <el-tooltip
                                        effect="dark"
                                        placement="top"
                                      >
                                        <div slot="content">
                                          自然计算：超过时间区间后顺延至计费单位结束才进入下一个时间区间进行计费； <br />
                                          强制结算：超过时间区间点后，不考虑计费单位，直接转入下一个时间区间进行计费<br />
                                          如：<br />
                                          12点前5元/小时，12点后6元/小时，车11:30进场<br />
                                          自然结算：11:30-12:30 5元，12:30后才按6元/小时收费，如果12:15出场，则需交费5元；<br />
                                          强制结算：11:30-12:00 5元，12:00后按照6元/小时收费，如果12:15出场，则需交费5元+6元=11元
                                        </div>

                                        <i class="el-icon-question question-icon"></i>
                                      </el-tooltip>
                                    </div>
                                  </template>
                                </div>

                                <div
                                  class="xunhuan-content type-content"
                                  v-if="TimeRuleItem.uiOpt.curRuleType === '递增收费'"
                                >
                                  <div class="top-circle"></div>
                                  <div class="bottom-circle"></div>
                                  <template v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList">
                                    <div
                                      class="el-form--inline zb-inline-form rule-inline-form"
                                      v-if="dindex === 0 && ruleItemDetailItem.chargeType === 2 && ruleItemDetailItem.stepType === 1"
                                    >
                                      <el-form-item
                                        label="首"
                                        label-width="78px"
                                        class="input-width-control short-input-item"
                                        :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeUnit'"
                                        :rules="[{required: true,validator: checkUnit,trigger: 'blur'}]"
                                      >
                                        <el-input
                                          type="number"
                                          placeholder="分钟数"
                                          v-model.number="ruleItemDetailItem.chargeUnit"
                                        ></el-input>
                                        <!-- <el-input placeholder="小时数"></el-input> -->
                                      </el-form-item>

                                      <el-form-item
                                        label=""
                                        label-width=""
                                        class="input-width-control short-input-item"
                                      >
                                        <el-select
                                          v-model="ruleItemDetailItem.uiOpt.curTimeType"
                                          placeholder="请选择"
                                          v-if="ruleItemDetailItem.uiOpt"
                                        >
                                          <el-option
                                            v-for="item in opts.timeType"
                                            :key="item.type"
                                            :label="item.type"
                                            :value="item.type"
                                            :disabled="item.type === '小时'"
                                          >
                                          </el-option>
                                        </el-select>
                                      </el-form-item>

                                      <el-form-item
                                        label=""
                                        label-width="0"
                                        class="input-width-control short-input-item"
                                        :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeAmount'"
                                        :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                                      >
                                        <el-input
                                          type="number"
                                          placeholder="￥"
                                          v-model.number="ruleItemDetailItem.chargeAmount"
                                        ></el-input>
                                      </el-form-item>

                                      <span class="unit">元</span>

                                      <el-button
                                        type="primary"
                                        size="mini"
                                        class="add-ruleDetial-icon"
                                        style="margin-left: 8px"
                                        @click="addDingE_RuleItem(TimeRuleItem.parkChargeStandardPeriodDetailVoList)"
                                      ><i class="el-icon-plus"></i>定额</el-button>
                                      <el-button
                                        type="primary"
                                        size="mini"
                                        class="add-ruleDetial-icon"
                                        @click="addXunHuan_RuleItem(TimeRuleItem, TimeRuleItem.parkChargeStandardPeriodDetailVoList)"
                                        :disabled="TimeRuleItem.isHasXunhuan"
                                      ><i class="el-icon-plus"></i>循环</el-button>
                                    </div>

                                    <div
                                      class="el-form--inline zb-inline-form rule-inline-form xunhuan-inline-form"
                                      v-if="dindex !== 0 && ruleItemDetailItem.chargeType === 2 && ruleItemDetailItem.stepType === 1"
                                    >
                                      <el-form-item
                                        label="定额"
                                        label-width="78px"
                                        class="input-width-control short-input-item"
                                        :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeUnit'"
                                        :rules="[{required: true,validator: checkUnit,trigger: 'blur'}]"
                                      >
                                        <el-input
                                          type="number"
                                          placeholder="分钟数"
                                          v-model.number="ruleItemDetailItem.chargeUnit"
                                        ></el-input>
                                      </el-form-item>

                                      <el-form-item
                                        label=""
                                        label-width=""
                                        class="input-width-control short-input-item"
                                      >
                                        <el-select
                                          v-model="ruleItemDetailItem.uiOpt.curTimeType"
                                          placeholder="请选择"
                                          v-if="ruleItemDetailItem.uiOpt"
                                        >
                                          <el-option
                                            v-for="item in opts.timeType"
                                            :key="item.type"
                                            :label="item.type"
                                            :value="item.type"
                                            :disabled="item.type === '小时'"
                                          >
                                          </el-option>
                                        </el-select>

                                      </el-form-item>

                                      <el-form-item
                                        label=""
                                        label-width="0"
                                        class="input-width-control short-input-item"
                                        :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeAmount'"
                                        :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                                      >
                                        <el-input
                                          type="number"
                                          placeholder="￥"
                                          v-model.number="ruleItemDetailItem.chargeAmount"
                                        ></el-input>
                                      </el-form-item>

                                      <span class="unit">元</span>

                                      <div
                                        class="del-icon"
                                        @click="delRuleItemDetailItem(TimeRuleItem.parkChargeStandardPeriodDetailVoList, dindex)"
                                      >
                                        <i class="el-icon-close"></i>
                                      </div>
                                    </div>
                                  </template>
                                  <template v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList">

                                    <div
                                      class="el-form--inline zb-inline-form rule-inline-form xunhuan-inline-form"
                                      v-if=" ruleItemDetailItem.chargeType === 2 && ruleItemDetailItem.stepType === 2"
                                    >
                                      <el-form-item
                                        label="之后每"
                                        label-width="78px"
                                        class="input-width-control short-input-item"
                                        :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeUnit'"
                                        :rules="[{required: true,validator: checkUnit,trigger: 'blur'}]"
                                      >
                                        <el-input
                                          type="number"
                                          placeholder="分钟数"
                                          v-model.number="ruleItemDetailItem.chargeUnit"
                                        ></el-input>
                                        <!-- <el-input placeholder="小时数"></el-input> -->
                                      </el-form-item>

                                      <el-form-item
                                        label=""
                                        label-width=""
                                        class="input-width-control short-input-item"
                                      >
                                        <el-select
                                          v-model="ruleItemDetailItem.uiOpt.curTimeType"
                                          placeholder="请选择"
                                          v-if="ruleItemDetailItem.uiOpt"
                                        >
                                          <el-option
                                            v-for="item in opts.timeType"
                                            :key="item.type"
                                            :label="item.type"
                                            :value="item.type"
                                            :disabled="item.type === '小时'"
                                          >
                                          </el-option>
                                        </el-select>

                                      </el-form-item>

                                      <el-form-item
                                        label=""
                                        label-width="0"
                                        class="input-width-control short-input-item"
                                        :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.parkChargeStandardPeriodVoList.' + index + '.parkChargeStandardPeriodDetailVoList.' + dindex + '.chargeAmount'"
                                        :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                                      >
                                        <el-input
                                          type="number"
                                          placeholder="￥"
                                          v-model.number="ruleItemDetailItem.chargeAmount"
                                        ></el-input>
                                      </el-form-item>

                                      <span class="unit">元</span>

                                      <div
                                        class="del-icon"
                                        @click="delRuleItemDetailXunHuanItem(TimeRuleItem, TimeRuleItem.parkChargeStandardPeriodDetailVoList, dindex)"
                                      >
                                        <i class="el-icon-close"></i>
                                      </div>
                                    </div>

                                  </template>

                                  <div class="el-form--inline zb-inline-form rule-inline-form">
                                    <el-form-item
                                      label="结算方式"
                                      label-width="78px"
                                      class="input-width-control short-input-item"
                                    >
                                      <el-select
                                        v-model="TimeRuleItem.mxSettleType"
                                        placeholder="请选择"
                                      >
                                        <el-option
                                          v-for="item in opts.optionMxSettleType"
                                          :key="item.value"
                                          :label="item.name"
                                          :value="item.value"
                                        >
                                        </el-option>
                                      </el-select>
                                    </el-form-item>
                                    <el-tooltip
                                      effect="dark"
                                      placement="top"
                                    >
                                      <div slot="content">
                                        自然计算：超过时间区间后顺延至计费单位结束才进入下一个时间区间进行计费； <br />
                                        强制结算：超过时间区间点后，不考虑计费单位，直接转入下一个时间区间进行计费<br />
                                        如：<br />
                                        12点前5元/小时，12点后6元/小时，车11:30进场<br />
                                        自然结算：11:30-12:30 5元，12:30后才按6元/小时收费，如果12:15出场，则需交费5元；<br />
                                        强制结算：11:30-12:00 5元，12:00后按照6元/小时收费，如果12:15出场，则需交费5元+6元=11元
                                      </div>

                                      <i class="el-icon-question question-icon"></i>
                                    </el-tooltip>
                                  </div>
                                </div>

                              </div>
                            </div>

                            <!-- 区分时段 end -->

                            <!-- 24小时计费 start -->
                            <div
                              class="rule-setting dates-rules daysRules"
                              v-if="(parkChargeStandardVoListItem.uiOpt.curSplitTime === '不分时段' && parkChargeStandardVoListItem.parkChargeStandardPeriodVoList[0].uiOpt.curRuleType !== '按次定额收费') || parkChargeStandardVoListItem.uiOpt.curSplitTime === '分时段'"
                            >
                              <div class="top-title">24小时计费</div>
                              <div class="daysRules-content">
                                <div class="el-form--inline zb-inline-form rule-inline-form">
                                  <el-form-item
                                    label="24小时制"
                                    label-width="120px"
                                  >
                                    <el-radio-group v-model="parkChargeStandardVoListItem.natureDay">
                                      <el-radio :label="0">停车时长</el-radio>
                                      <el-radio :label="1">自然日</el-radio>
                                    </el-radio-group>
                                  </el-form-item>

                                  <el-form-item
                                    label=""
                                    label-width="0"
                                    v-if="parkChargeStandardVoListItem.natureDay === 1"
                                  >
                                    <el-time-picker
                                      value-format="HH:mm:ss"
                                      format="HH:mm:ss"
                                      :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }"
                                      placeholder="自然日开始时间"
                                      v-model="parkChargeStandardVoListItem.startTime"
                                    >
                                    </el-time-picker>
                                  </el-form-item>

                                  <el-tooltip
                                    effect="dark"
                                    placement="top"
                                  >
                                    <div slot="content">
                                      停车时长：不受自然日限制，直接以24小时停车时长作为一个计费区间，如果车辆09:00:00入场，到第二天09:00:00为一个计费区间； <br />
                                      自然日： 起始时间24小时为一个区间，假如设置起始时间为08:00:00，车辆09:00:00入场，到第二天08:00:00也将会结算一次<br />
                                    </div>

                                    <i class="el-icon-question question-icon"></i>
                                  </el-tooltip>

                                </div>
                                <div class="el-form--inline zb-inline-form rule-inline-form select-form-item">
                                  <el-form-item
                                    label="收费规则循环"
                                    label-width="120px"
                                    class="input-width-control short-input-item"
                                  >
                                    <el-select
                                      v-model="parkChargeStandardVoListItem.loopType"
                                      placeholder="请选择"
                                    >
                                      <el-option
                                        v-for="item in opts.optionLoopType"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.value"
                                      >
                                      </el-option>
                                    </el-select>
                                  </el-form-item>
                                  <el-tooltip
                                    effect="dark"
                                    placement="top"
                                  >
                                    <div slot="content">
                                      收费规则循环：确定一个计费区间（24小时）后的计费方法： <br />
                                      假如按停车时长收费，停车首个小时收费10元，之后按每小时2元收费，停车时长超过24小时：<br />
                                      1）循环整个收费规则：超过24小时后，继续首个小时收费10元，之后每小时收费2元。<br />
                                      2）循环末段收费规则：超过24小时后，依然按照每小时2元进行收费。<br />
                                    </div>

                                    <i class="el-icon-question question-icon"></i>
                                  </el-tooltip>
                                </div>

                                <div class="el-form--inline zb-inline-form rule-inline-form">
                                  <el-form-item
                                    label="24小时封顶"
                                    label-width="120px"
                                    class="input-width-control"
                                  >
                                    <el-checkbox
                                      v-model="parkChargeStandardVoListItem.uiOpt.isMaxCharge"
                                      @change="isMaxChargeChange($event, parkChargeStandardVoListItem)"
                                    >封顶</el-checkbox>
                                  </el-form-item>

                                  <template v-if="parkChargeStandardVoListItem.uiOpt.isMaxCharge">
                                    <el-form-item
                                      label=""
                                      label-width="0"
                                      class="input-width-control short-input-item"
                                      :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.maxCharge'"
                                      :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                                    >
                                      <el-input
                                        placeholder="￥"
                                        type="number"
                                        v-model.number="parkChargeStandardVoListItem.maxCharge"
                                      ></el-input>
                                    </el-form-item>
                                    <span class="unit">元</span>
                                  </template>

                                </div>

                                <div class="el-form--inline zb-inline-form rule-inline-form">
                                  <el-form-item
                                    label="24小时子封顶"
                                    label-width="120px"
                                    class="input-width-control"
                                  >
                                    <el-checkbox
                                      v-model="parkChargeStandardVoListItem.uiOpt.customIsMaxCharge"
                                      @change="customIsMaxChargeChange($event, parkChargeStandardVoListItem)"
                                    >封顶</el-checkbox>
                                  </el-form-item>

                                  <template v-if="parkChargeStandardVoListItem.uiOpt.customIsMaxCharge">
                                    <el-form-item
                                      label=""
                                      label-width="0px"
                                      class="input-width-control short-input-item"
                                      :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.customMaxUnit'"
                                      :rules="[{required: true,validator: checkUnit,trigger: 'blur'}]"
                                    >
                                      <el-input
                                        type="number"
                                        placeholder="分钟数"
                                        v-model.number="parkChargeStandardVoListItem.customMaxUnit"
                                      ></el-input>
                                    </el-form-item>

                                    <el-form-item
                                      label=""
                                      label-width=""
                                      class="input-width-control short-input-item"
                                    >
                                      <el-select
                                        v-model="parkChargeStandardVoListItem.uiOpt.curTimeType"
                                        placeholder="请选择"
                                      >
                                        <el-option
                                          v-for="item in opts.timeType"
                                          :key="item.type"
                                          :label="item.type"
                                          :value="item.type"
                                          :disabled="item.type === '小时'"
                                        >
                                        </el-option>
                                      </el-select>

                                    </el-form-item>

                                    <span
                                      class="unit"
                                      style="margin-right: 10px"
                                    >封顶</span>
                                    <el-form-item
                                      label=""
                                      label-width="0"
                                      class="input-width-control short-input-item"
                                      :prop="'parkChargeBaseVoList.' + parkChargeBaseVoListItemIndex + '.parkChargeStandardVoList.' + parkChargeStandardVoListIndex + '.customMaxCharge'"
                                      :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                                    >
                                      <el-input
                                        type="number"
                                        placeholder="￥"
                                        v-model.number="parkChargeStandardVoListItem.customMaxCharge"
                                      ></el-input>
                                    </el-form-item>
                                    <span class="unit">元</span>
                                  </template>

                                </div>

                              </div>
                            </div>
                            <!-- 24小时计费 end -->

                          </div>
                        </el-collapse-transition>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </el-collapse-transition>
          </div>
        </el-form>
      </div>

      <div
        v-show="currentTab === '特殊收费规则'"
        class="special-rule-form"
      >
        <template v-if="!isAddingSpecialRule">

          <div class="top-title">
            <div class="title">
              特殊收费规则列表
            </div>
            <a
              href="javascript:;"
              class="add-icon"
              @click="addSpecialRule"
            >
              <i class="el-icon-circle-plus"></i>
              添加特殊收费规则
            </a>
          </div>

          <el-form
            label-width="120px"
            size="small"
            class="zb-form rule-form"
            :model="parkSpecialChargeVoList"
            ref="parkSpecialChargeVoList"
          >

            <div class="special-rule-list">
              <div
                class="special-rule-item"
                v-for="(item, index) in parkSpecialChargeVoList.ruleList"
                :key="index"
              >
                <div class="rule-top">
                  <div class="title">{{ item.chargeName }}</div>
                  <div class="action">
                    <div
                      class="open-status"
                      v-if="item.enableFlag"
                    >
                      启用
                    </div>
                    <div
                      class="open-status close"
                      v-if="!item.enableFlag"
                    >
                      未启用
                    </div>
                    <div
                      class="show-rule-detail-icon"
                      @click="item.isShow = !item.isShow"
                    ><i
                        class="el-icon-caret-right"
                        :class="{rotate90:
                      item.isShow}"
                      ></i></div>
                    <div
                      class="delItem-icon"
                      @click="delSpecialRuleItem(parkSpecialChargeVoList.ruleList, index)"
                    >
                      <i class="el-icon-close"></i>
                    </div>
                  </div>

                </div>
                <el-collapse-transition>
                  <div
                    class="rule-content"
                    v-show="item.isShow"
                  >
                    <!-- <el-form label-width="90"> -->
                    <div class="el-form--inline zb-inline-form rule-inline-form">
                      <el-form-item
                        label="规则名称"
                        label-width="90px"
                        class="input-width-control"
                        :prop="'ruleList.' + index + '.chargeName'"
                        :rules="[{ required: true, message: '请输入规则名称', trigger: 'blur' }]"
                      >
                        <el-input v-model="item.chargeName"></el-input>
                      </el-form-item>
                      <el-form-item
                        label=""
                        label-width="0"
                        style="margin-left: 15px"
                      >
                        <el-checkbox v-model="item.enableFlag">启用规则</el-checkbox>
                      </el-form-item>
                    </div>

                    <div class="el-form--inline zb-inline-form rule-inline-form">
                      <el-form-item
                        label="规则内容"
                        label-width="90px"
                        class="input-width-control"
                        :prop="'ruleList.' + index + '.chargeType'"
                        :rules="[{ required: true, message: '请输入规则内容', trigger: 'blur' }]"
                      >
                        <el-select
                          v-model="item.chargeType"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="item in opts.specialType"
                            :key="item.value"
                            :label="item.type"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>

                    </div>

                    <div
                      class="el-form--inline zb-inline-form rule-inline-form"
                      v-if="item.chargeType === 1"
                    >
                      <el-form-item
                        label="24小时制"
                        label-width="90px"
                        class="input-width-control"
                      >

                        <el-radio-group v-model="item.parkSpecialChargeAllDayTopVo.institutionType">
                          <el-radio
                            :label="item.value"
                            v-for="item in opts.institutionType"
                          >{{ item.type }}</el-radio>
                        </el-radio-group>

                      </el-form-item>
                    </div>

                    <div
                      class="el-form--inline zb-inline-form rule-inline-form"
                      v-if="item.chargeType === 1 && item.parkSpecialChargeAllDayTopVo.institutionType==0"
                    >
                      <el-form-item
                        label="封顶金额"
                        label-width="90px"
                        class="input-width-control"
                        :prop="'ruleList.' + index + '.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopParkingDurationVo.maxValue'"
                        :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                      >
                        <el-input
                          type="number"
                          v-model.number="item.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopParkingDurationVo.maxValue"
                        ></el-input>
                      </el-form-item>
                      <span class="unit">元</span>
                    </div>

                    <!-- 自然日-(起始时刻 and 封顶金额) -->
                    <div
                      class="el-form--inline zb-inline-form rule-inline-form"
                      v-else-if="item.chargeType === 1 && item.parkSpecialChargeAllDayTopVo.institutionType==1"
                    >
                      <!-- 起始时刻 -->
                      <el-form-item
                        label="起始时刻"
                        label-width="90px"
                        class="input-width-control"
                        :prop="'ruleList.' + index +'.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.startTime'"
                      >
                        <el-time-picker
                          placeholder="选择时间"
                          v-model="item.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.startTime"
                          format="HH:mm"
                          value-format="HH:mm"
                          @change="naturalDayStartTimeForSingle(item)"
                        >
                        </el-time-picker>
                      </el-form-item>
                      <!-- 封顶金额 -->
                      <el-form-item
                        label="封顶金额"
                        label-width="90px"
                        class="input-width-control"
                        :prop="'ruleList.' + index +'.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.maxValue'"
                        :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                      >
                        <el-input
                          type="number"
                          v-model.number="item.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.maxValue"
                        ></el-input>
                      </el-form-item>
                      <span class="unit">元</span>
                      <div
                        class="naturalDay-addBtn-box"
                        @click="addNaturalDayTopItem(item)"
                      >
                        <img
                          src="../../../../../assets/img/ic_subscribe_add@2x.svg"
                          alt
                        >
                        <span>添加子封顶</span>
                      </div>
                    </div>

                    <div
                      class="naturalDay-sub-list"
                      v-if="item.chargeType === 1 && item.parkSpecialChargeAllDayTopVo.institutionType==1"
                    >
                      <div
                        class="sub-item"
                        v-for="(sitem,sindex) in item.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.parkSpecialChargeAllDayTopNaturalDaySubTimeVoList"
                      >
                        <div class="item-text">子封顶 {{sindex+1}}</div>
                        <div class="time-slot el-form--inline zb-inline-form rule-inline-form">
                          <el-form-item
                            label-width="90px"
                            class="input-width-control"
                            :prop="'ruleList.' + index + '.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.parkSpecialChargeAllDayTopNaturalDaySubTimeVoList.'+sindex+'.startTime'"
                          >
                            <el-time-picker
                              placeholder="00:00"
                              v-model="sitem.startTime"
                              format="HH:mm"
                              value-format="HH:mm"
                              :disabled="sindex==0"
                            >
                            </el-time-picker>
                          </el-form-item>
                          <span class="symbol">~</span>
                          <el-form-item
                            label-width="90px"
                            class="input-width-control"
                            :prop="'ruleList.' + index +'.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.parkSpecialChargeAllDayTopNaturalDaySubTimeVoList.'+sindex+'.endTime'"
                          >
                            <el-time-picker
                              placeholder="00:00"
                              v-model="sitem.endTime"
                              format="HH:mm"
                              value-format="HH:mm"
                              :disabled="sindex==(item.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.parkSpecialChargeAllDayTopNaturalDaySubTimeVoList.length-1)"
                            >
                            </el-time-picker>
                          </el-form-item>
                        </div>
                        <div class="money-box">
                          <el-form-item
                            label="封顶金额"
                            label-width="100px"
                            class="input-width-control"
                            :prop="'ruleList.' + index +'.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.parkSpecialChargeAllDayTopNaturalDaySubTimeVoList.'+sindex+'.maxValue'"
                            :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                          >
                            <el-input
                              type="number"
                              v-model.number="sitem.maxValue"
                            ></el-input>
                          </el-form-item>
                          <span class="unit">元</span>
                          <div
                            v-if="sindex!=0"
                            class="del-icon"
                            @click="deleteSubTopItem(item, sindex)"
                          >
                            <i class="el-icon-close"></i>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div
                      class="el-form--inline zb-inline-form rule-inline-form"
                      v-if="item.chargeType === 5"
                    >
                      <el-form-item
                        label="免费时长"
                        label-width="90px"
                        class="input-width-control"
                        :prop="'ruleList.' + index + '.parkSpecialChargeRepeatShareFreeVo.parkSpecialChargeRepeatShareFreeNaturalDayVo.freeValue'"
                        :rules="[{ required: true, message: '请输入免费时长', trigger: 'blur' }]"
                      >
                        <el-input
                          type="number"
                          v-model.number="item.parkSpecialChargeRepeatShareFreeVo.parkSpecialChargeRepeatShareFreeNaturalDayVo.freeValue"
                          min="0"
                        ></el-input>
                      </el-form-item>
                      <span class="unit">分</span>
                    </div>

                    <div class="el-form--inline zb-inline-form rule-inline-form">
                      <el-form-item
                        label="使用条件"
                        label-width="90px"
                        class="input-width-control"
                        :prop="'ruleList.' + index + '.parkSpecialChargeServiceConditionVo.serviceConditionType'"
                      >
                        <el-select
                          placeholder="请选择"
                          v-model="item.parkSpecialChargeServiceConditionVo.serviceConditionType"
                          @change="listItemServiceConditionTypeChange($event, item)"
                        >
                          <el-option
                            v-for="item in opts.serviceConditionType"
                            :key="item.value"
                            :label="item.type"
                            :value="item.value"
                            :disabled="item.disabled"
                          >
                          </el-option>
                        </el-select>

                        <template v-if="item.parkSpecialChargeServiceConditionVo.serviceConditionType === 1">
                          <span
                            class="unit"
                            style="margin: 0 2px"
                          >包含</span>
                          <el-form-item
                            label=""
                            label-width="0"
                            class="input-width-control plate-input-item"
                            :prop="'ruleList.' + index + '.parkSpecialChargeServiceConditionVo.serviceConditionValue'"
                            :rules="[{ required: true, message: '请输入车牌号码', trigger: 'blur' }]"
                          >
                            <el-input
                              v-model="item.parkSpecialChargeServiceConditionVo.serviceConditionValue"
                              placeholder="请输入车牌号码(模糊)"
                            ></el-input>
                          </el-form-item>
                        </template>

                        <!-- <span class="unit_">=</span>
                      <el-select
                        v-model="value"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select> -->

                      </el-form-item>

                    </div>

                    <!-- <div class="el-form--inline zb-inline-form rule-inline-form">
                    <el-form-item
                      label="使用条件"
                      label-width="90px"
                      class="input-width-control"
                    >
                      <el-select
                        v-model="value"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <span
                        class="unit"
                        style="margin: 0 2px"
                      >包含</span>
                      <el-form-item
                        label=""
                        label-width="0"
                        class="input-width-control plate-input-item"
                      >
                        <el-input placeholder="请输入车牌号码(模糊)"></el-input>
                      </el-form-item>
                    </el-form-item>

                  </div> -->

                    <el-form-item
                      label=""
                      label-width="82px"
                      v-if="item.parkSpecialChargeServiceConditionVo.serviceConditionType == 3"
                      :prop="'ruleList.' + index + '.parkSpecialChargeServiceConditionVo.serviceConditionValue'"
                      :rules="[{ type: 'array', required: true, message: '请至少选择一种车辆类型', trigger: 'change' }]"
                    >
                      <el-checkbox-group v-model="item.parkSpecialChargeServiceConditionVo.serviceConditionValue">

                        <el-checkbox
                          :label="item.value"
                          :key="item.value"
                          v-for="item in opts.carTypes_special"
                        >{{ item.type }}</el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                    <!-- </el-form> -->

                  </div>
                </el-collapse-transition>
              </div>
            </div>
          </el-form>
        </template>

        <template v-if="isAddingSpecialRule">
          <el-form
            :model="specialRuleItemInitData"
            :rules="specialRuleTestRules"
            ref="specialRuleItemInitData"
            label-width="120px"
            size="small"
            class="zb-form rule-form add-special-rule-content"
            label-position="left"
          >

            <div class="rule-content">
              <!-- <el-form label-width="90"> -->
              <div class="el-form--inline zb-inline-form rule-inline-form">
                <el-form-item
                  label="规则名称"
                  label-width="90px"
                  class="input-width-control"
                  prop="chargeName"
                  :rules="[{ required: true, message: '请输入规则名称', trigger: 'blur' }]"
                >
                  <el-input v-model="specialRuleItemInitData.chargeName"></el-input>
                </el-form-item>
                <el-form-item
                  label=""
                  label-width="0"
                  style="margin-left: 15px"
                >
                  <el-checkbox v-model="specialRuleItemInitData.enableFlag">启用规则</el-checkbox>
                </el-form-item>
              </div>

              <div class="el-form--inline zb-inline-form rule-inline-form">
                <el-form-item
                  label="规则内容"
                  label-width="90px"
                  class="input-width-control"
                  prop="chargeType"
                  :rules="[{ required: true, message: '请选择规则内容', trigger: 'blur' }]"
                >
                  <el-select
                    v-model="specialRuleItemInitData.chargeType"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in opts.specialType"
                      :key="item.value"
                      :label="item.type"
                      :value="item.value"
                    >

                    </el-option>
                  </el-select>
                </el-form-item>

              </div>

              <div
                class="el-form--inline zb-inline-form rule-inline-form"
                v-if="specialRuleItemInitData.chargeType === 1"
              >
                <el-form-item
                  label="24小时制"
                  label-width="90px"
                  class="input-width-control"
                >

                  <el-radio-group v-model="specialRuleItemInitData.parkSpecialChargeAllDayTopVo.institutionType">
                    <el-radio
                      :label="item.value"
                      v-for="item in opts.institutionType"
                    >{{ item.type }}</el-radio>
                  </el-radio-group>

                </el-form-item>
              </div>

              <div
                class="el-form--inline zb-inline-form rule-inline-form"
                v-if="specialRuleItemInitData.chargeType === 1 && specialRuleItemInitData.parkSpecialChargeAllDayTopVo.institutionType==0"
              >
                <el-form-item
                  label="封顶金额"
                  label-width="90px"
                  class="input-width-control"
                  prop="parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopParkingDurationVo.maxValue"
                  :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                >
                  <el-input
                    type="number"
                    v-model.number="specialRuleItemInitData.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopParkingDurationVo.maxValue"
                  ></el-input>
                </el-form-item>
                <span class="unit">元</span>
              </div>

              <!-- 自然日-(起始时刻 and 封顶金额) -->
              <div
                class="el-form--inline zb-inline-form rule-inline-form"
                v-else-if="specialRuleItemInitData.chargeType === 1 && specialRuleItemInitData.parkSpecialChargeAllDayTopVo.institutionType==1"
              >
                <!-- 起始时刻 -->
                <el-form-item
                  label="起始时刻"
                  label-width="90px"
                  class="input-width-control"
                  prop="parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.startTime"
                >
                  <el-time-picker
                    @change="naturalDayStartTime"
                    placeholder="选择时间"
                    v-model="specialRuleItemInitData.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.startTime"
                    format="HH:mm"
                    value-format="HH:mm"
                  >
                  </el-time-picker>
                </el-form-item>
                <!-- 封顶金额 -->
                <el-form-item
                  label="封顶金额"
                  label-width="90px"
                  class="input-width-control"
                  prop="parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.maxValue"
                  :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                >
                  <el-input
                    type="number"
                    v-model.number="specialRuleItemInitData.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.maxValue"
                  ></el-input>
                </el-form-item>
                <span class="unit">元</span>

                <div
                  class="naturalDay-addBtn-box"
                  @click="addNaturalDayTopItem(specialRuleItemInitData)"
                >
                  <img
                    src="../../../../../assets/img/ic_subscribe_add@2x.svg"
                    alt
                  >
                  <span>添加子封顶</span>
                </div>
              </div>

              <div
                class="naturalDay-sub-list"
                v-if="specialRuleItemInitData.chargeType === 1 && specialRuleItemInitData.parkSpecialChargeAllDayTopVo.institutionType==1"
              >
                <div
                  class="sub-item"
                  v-for="(item,index) in specialRuleItemInitData.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.parkSpecialChargeAllDayTopNaturalDaySubTimeVoList"
                >
                  <div class="item-text">子封顶 {{index+1}}</div>
                  <div class="time-slot el-form--inline zb-inline-form rule-inline-form">
                    <el-form-item
                      label-width="90px"
                      class="input-width-control"
                      :prop="'parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.parkSpecialChargeAllDayTopNaturalDaySubTimeVoList.'+index+'.startTime'"
                    >
                      <el-time-picker
                        placeholder="00:00"
                        v-model="item.startTime"
                        format="HH:mm"
                        value-format="HH:mm"
                        :disabled="index===0"
                      >
                      </el-time-picker>
                    </el-form-item>
                    <span class="symbol">~</span>
                    <el-form-item
                      label-width="90px"
                      class="input-width-control"
                      :prop="'parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.parkSpecialChargeAllDayTopNaturalDaySubTimeVoList.'+index+'.endTime'"
                    >
                      <el-time-picker
                        placeholder="00:00"
                        v-model="item.endTime"
                        format="HH:mm"
                        value-format="HH:mm"
                        :disabled="index===(specialRuleItemInitData.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.parkSpecialChargeAllDayTopNaturalDaySubTimeVoList.length-1)"
                      >
                      </el-time-picker>
                    </el-form-item>
                  </div>
                  <div class="money-box">
                    <el-form-item
                      label="封顶金额"
                      label-width="100px"
                      class="input-width-control"
                      :prop="'parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.parkSpecialChargeAllDayTopNaturalDaySubTimeVoList.'+index+'.maxValue'"
                      :rules="[{required: true,validator: checkMoney,trigger: 'blur'}]"
                    >
                      <el-input
                        type="number"
                        v-model.number="item.maxValue"
                      ></el-input>
                    </el-form-item>
                    <span class="unit">元</span>
                  </div>
                  <div
                    v-if="index!=0"
                    class="del-icon"
                    @click="deleteSubTopItem(specialRuleItemInitData,index)"
                  >
                    <i class="el-icon-close"></i>
                  </div>
                </div>
              </div>

              <div
                class="el-form--inline zb-inline-form rule-inline-form"
                v-if="specialRuleItemInitData.chargeType === 5"
              >
                <el-form-item
                  label="免费时长"
                  label-width="90px"
                  class="input-width-control"
                  prop="parkSpecialChargeRepeatShareFreeVo.parkSpecialChargeRepeatShareFreeNaturalDayVo.freeValue"
                  :rules="[{ required: true, message: '请输入免费时长', trigger: 'blur' }]"
                >
                  <el-input
                    type="number"
                    v-model.number="specialRuleItemInitData.parkSpecialChargeRepeatShareFreeVo.parkSpecialChargeRepeatShareFreeNaturalDayVo.freeValue"
                    min="0"
                  ></el-input>
                </el-form-item>
                <span class="unit">分</span>
              </div>

              <div class="el-form--inline zb-inline-form rule-inline-form">
                <el-form-item
                  label="使用条件"
                  label-width="90px"
                  class="input-width-control"
                  prop="parkSpecialChargeServiceConditionVo.serviceConditionType"
                  :rules="[{ required: true, message: '请选择使用条件', trigger: 'change' }]"
                >
                  <el-select
                    placeholder="请选择"
                    v-model="specialRuleItemInitData.parkSpecialChargeServiceConditionVo.serviceConditionType"
                    @change="serviceConditionTypeChange"
                  >
                    <el-option
                      v-for="item in opts.serviceConditionType"
                      :key="item.value"
                      :label="item.type"
                      :value="item.value"
                      :disabled="item.disabled"
                    >
                    </el-option>
                  </el-select>

                  <template v-if="specialRuleItemInitData.parkSpecialChargeServiceConditionVo.serviceConditionType === 1">
                    <span
                      class="unit"
                      style="margin: 0 2px"
                    >包含</span>
                    <el-form-item
                      label=""
                      label-width="0"
                      class="input-width-control plate-input-item"
                      prop="parkSpecialChargeServiceConditionVo.serviceConditionValue"
                      :rules="[{ required: true, message: '请输入车牌号码', trigger: 'blur' }]"
                    >
                      <el-input
                        v-model="specialRuleItemInitData.parkSpecialChargeServiceConditionVo.serviceConditionValue"
                        placeholder="请输入车牌号码(模糊)"
                      ></el-input>
                    </el-form-item>
                  </template>

                  <template v-if="specialRuleItemInitData.parkSpecialChargeServiceConditionVo.serviceConditionType == 2">
                    <span class="unit_">=</span>
                    <el-select
                      v-model="specialRuleItemInitData.parkSpecialChargeServiceConditionVo.serviceConditionValue"
                      placeholder="请选择"
                      multiple
                    >
                      <el-option
                        v-for="item in specialRuleVipTypes"
                        :key="item.id"
                        :label="item.customVipName"
                        :value="`${item.id}`"
                      >
                      </el-option>
                    </el-select>
                  </template>

                  <!-- <span class="unit_">=</span>
                      <el-select
                        v-model="value"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select> -->

                </el-form-item>

              </div>

              <!-- <div class="el-form--inline zb-inline-form rule-inline-form">
                    <el-form-item
                      label="使用条件"
                      label-width="90px"
                      class="input-width-control"
                    >
                      <el-select
                        v-model="value"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <span
                        class="unit"
                        style="margin: 0 2px"
                      >包含</span>
                      <el-form-item
                        label=""
                        label-width="0"
                        class="input-width-control plate-input-item"
                      >
                        <el-input placeholder="请输入车牌号码(模糊)"></el-input>
                      </el-form-item>
                    </el-form-item>

                  </div> -->

              <el-form-item
                label=""
                label-width="82px"
                v-if="specialRuleItemInitData.parkSpecialChargeServiceConditionVo.serviceConditionType == 3"
                prop="parkSpecialChargeServiceConditionVo.serviceConditionValue"
                :rules="[{ type: 'array', required: true, message: '请至少选择一种车辆类型', trigger: 'change' }]"
              >
                <el-checkbox-group v-model="specialRuleItemInitData.parkSpecialChargeServiceConditionVo.serviceConditionValue">

                  <el-checkbox
                    :label="item.value"
                    :key="item.value"
                    v-for="item in opts.carTypes_special"
                  >{{ item.type }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>

            </div>

          </el-form>
        </template>
      </div>

      <el-form
        label-width="120px"
        size="small"
        class="zb-form rule-form"
      >

        <el-form-item
          size="medium"
          class="action-box"
          label-width="0px"
          v-if="!isAddingSpecialRule"
        >
          <el-button
            type="primary"
            @click="goBackStep"
          ><i class="el-icon-arrow-left el-icon--left"></i>上一步</el-button>
          <el-button
            type="primary"
            @click="goNextStep"
          >下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-form-item>

        <el-form-item
          size="medium"
          class="action-box"
          label-width="0px"
          v-if="isAddingSpecialRule"
        >
          <el-button
            plain
            @click="isAddingSpecialRule = false"
          >取消</el-button>
          <el-button
            type="primary"
            @click="addSpecialRuleToList"
          >添加</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>


<script>
import pageScript from "./index.js";
export default pageScript;
</script>


<style lang="less" scoped>
@import "../FormContent.less";
</style>

<style lang="less">
@import "../../../../../assets/less/base/zbForm.less";
</style>

<style lang="less" scoped>
@import "./index.less";
.naturalDay-addBtn-box {
  margin-left: 10px;
  color: @blue;
  cursor: pointer;
}

.naturalDay-sub-list {
  margin-bottom: 8px;
  .sub-item {
    background: #f4f4f4;
    border-radius: 4px;
    padding: 10px 20px;
    display: flex;
    position: relative;
    margin-bottom: 15px;
    > div {
      &:first-child {
        padding-top: 6px;
        margin-right: 10px;
      }
      &.time-slot {
        margin-bottom: 0px;
        .symbol {
          margin-right: 10px;
        }
      }
    }
    .money-box {
      display: flex;
      .unit {
        padding-top: 7px;
        margin-left: 10px;
      }
      .el-form-item {
        margin-bottom: 0px;
      }
    }
    .del-icon {
      top: 18px;
      align-items: unset;
    }
  }
}
.flex-tip {
  padding: 10px;
  background: #f0f0f0;
  border-radius: 5px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  img {
    width: 22px;
    height: 22px;
    margin-right: 10px;
  }
}
</style>
